<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <link rel="shortcut icon" href="Imagenes/database_mysql.ico" type="image/x-icon"/> 
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Pagina Principal</title>
                <style>
                    .ui-layout-north {
                        z-index:20 !important;
                        overflow:visible !important;
                    }
                    .ui-layout-north .ui-layout-unit-content {
                        overflow:visible !important;
                    }
                </style>
            </f:facet>
        </h:head>
        <h:body>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" id="norte" styleClass=".ui-layout-north"  >
                    <h:form>
                        <p:menubar>
                            <p:submenu label = "#{loginBean.user.toUpperCase()}">
                                <p:menuitem value="Inicio" action="#{loginBean.begin()}" icon="ui-icon-extlink" />
                                <p:menuitem value="Logout" action="#{loginBean.logout()}" icon="ui-icon ui-icon-person" />
                            </p:submenu>    
                            <f:facet name="options">  
                                <h:panelGrid columns="2">
                                    <p:outputLabel value="Administrador de Servidor de Base de Datos MySQL" style="color: #F6AE37;"/>
                                <p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server" />
                                
                                </h:panelGrid>
                            </f:facet>
                        </p:menubar>
                    </h:form>
                </p:layoutUnit>
                <p:layoutUnit position="west" size="250" header="Herramientas" collapsible="flase" resizable="false">
                    <h:form>
                        <p:slideMenu style="height:360px">
                               <p:menuitem value="Inicio"
                                            style="color: black; font-weight: bold" update="centro"                                        
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('vacio')}" />
                               <p:menuitem value="Terminal MySQL" id="menuItemTerminal"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('terminal')}" />
                               <p:separator/>
                                <p:menuitem value="Schemas"
                                        style="color: black; font-weight: bold" update="centro"
                                        ajax="false"
                                        action="#{principalPageBean.setCenterPage('reviewdatabase')}" />

                                <p:menuitem value="Variables del Sistema"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('systemvariables')}" />
                            <p:separator/>
                            <p:submenu label="Usuarios y Privilegios" style="height:30px">
                                <p:menuitem value="Listado de Usuarios y Borrado"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('usuarios')}" />
                                <p:menuitem value="Crear Usuarios"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('createusers')}" />
                                <p:menuitem value="Privilegios Avanzados"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('advancedPrivileges')}" />
                            </p:submenu>  
                            <p:separator/>
                            <p:menuitem value="Chequeo de Consistencia"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('check')}" />
                                <p:menuitem value="Back-Up"
                                            style="color: black; font-weight: bold" update="centro"
                                            ajax="false"
                                            action="#{principalPageBean.setCenterPage('backup')}" />
                            
                        </p:slideMenu>                                              
                    </h:form>

                </p:layoutUnit>                
                <p:layoutUnit id="centro" position="center">
                    <c:if test="#{principalPageBean.centerPage eq 'vacio'}">
                        <ui:include src="inicio.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'terminal'}">
                        <ui:include src="terminal.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'systemvariables'}">
                        <ui:include src="tablesystemvariable.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'reviewdatabase'}">
                        <ui:include src="tabledatabase.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'createusers'}">
                        <ui:include src="createusers.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'advancedPrivileges'}" >
                        <ui:include src="advancedPrivileges.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'check'}" >
                        <ui:include src="checkConsistence.xhtml" />
                    </c:if>
                    <c:if test="#{principalPageBean.centerPage eq 'backup'}" >
                        <ui:include src="backup.xhtml" />
                    </c:if>
                    <h:panelGroup rendered="#{principalPageBean.centerPage eq 'usuarios'}" >
                        <ui:include src="Privilegios/listarUsuarios.xhtml"  />
                    </h:panelGroup>      
                </p:layoutUnit>  
                <h:form style="margin: 0 auto">
                <p:idleMonitor timeout="288000"   
                               onidle="PF('idleDialog').show()"/>  

                <p:dialog header="Su sesion ha expirado"   
                          widgetVar="idleDialog" modal="true" closable="false"> 
                    <h:panelGrid columns="1" style="margin: 0 auto" >
                         
                        <h:outputText value="Por Favor Ingrese de Nuevo" /> 
                        <p:commandButton value="Aceptar" 
                                         action="#{principalPageBean.reset()}" 
                                         style="text-align:center;margin: 0 auto;"/>                      
                    </h:panelGrid>
                </p:dialog>
                </h:form>
            </p:layout>
        </h:body>
    </f:view>
</html>

